<template>
  <div>
    <Head :item="1"></Head>
    <br />
    <br />
    <br />
    <div class="container">
      <div class="row bg-light">
        <div class="col-md-8">
          <div
            class="media border p-3"
            v-for="item in articles"
            :key="item.id"
            v-on:click="selectitem(item.id)"
          >
            <div class="media-left">
              <img
                :src="$imageUrl + item.thumbnail"
                class="img-thumbnail"
                style="width: 150px"
              />
            </div>
            <div class="media-body">
              <h3>{{ item.title }}</h3>
              <br />
              <p>
                发表日期：{{ item.created }} &emsp;点击量：{{
                  item.hits
                }}&emsp;评论量：{{ item.comments }}
              </p>
            </div>
          </div>
          <ul class="pagination">
            <li class="page-item">
              <a class="page-link" href="#">Previous</a>
            </li>
            <li class="page-item active">
              <a class="page-link" href="#">1</a>
            </li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item"><a class="page-link" href="#">Next</a></li>
          </ul>
        </div>
        <div class="col-md-4">
          <div class="row">
            <h5>公告:</h5>
            <ul class="list-group">
              <li
                v-for="item in notices"
                class="list-group-item"
                :key="item.id"
                v-on:click="selectnotice(item.id)"
              >
                {{ item.title }}&emsp;{{ item.created }}
              </li>
            </ul>
          </div>
          <br />
          <div class="row">
            <h5>热度文章：</h5>
            <ul class="list-group">
              <li
                v-on:click="selectitem(item.id)"
                class="list-group-item"
                v-for="item in top"
                :key="item.id"
              >
                {{ item.title }}&emsp;点击量：{{ item.hits }}&emsp;评论量：{{
                  item.comments
                }}<br />
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Head from "@/components/Head";
import Footer from "@/components/Footer";
export default {
  name: "Articles",
  data() {
    return {
      articles: "",
      top: [],
      notices: "",
    };
  },
  methods: {
    selectitem(id) {
      this.$router.push({
        path: "detail",
        query: { id: id },
      });
    },
    selectnotice(id) {
      this.$router.push({
        path: "noticeDetail",
        query: { id: id },
      });
    },
  },
  mounted() {
    //发送get请求
    this.$axios
      .get("articles")
      .then((response) => (this.articles = response.data.data))
      .catch((error) => console.log(error)); // 请求失败处理
    //发送get请求热度文章
    this.$axios
      .get("top")
      .then((response) => {
        this.top = response.data.data;
      })
      .catch((error) => console.log(error)); // 请求失败处理
    //发送get请求公告
    this.$axios
      .get("notices")
      .then((response) => (this.notices = response.data.data))
      .catch((error) => console.log(error)); // 请求失败处理
  },
  components: {
    Head: Head,
    Footer: Footer,
  },
};
</script>